// 统一的注册所有的全局组件
// vue的插件机制,Vue.use(对象或方法)
// 如果是对象 : 必须要有一个方法install
// 如果是函数 : 这个函数相当于install方法
import XtxSkeleton from '@/components/skeleton/index.vue'
import XtxCarousel from './carousel/index.vue'
import XtxMore from './more/index.vue'
import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'

import Bread from './Bread/index.vue'
import BreadItem from './Bread/Item.vue'

import XtxCity from '@/components/city/index.vue'
export default {
  install(app: App) {
    app.component('XtxSkeleton', XtxSkeleton)
    app.component(XtxCarousel.name, XtxCarousel)
    app.component('XtxMore', XtxMore)
    app.component('XtxBread', Bread)
    app.component('XtxBreadItem', BreadItem)
    app.component('XtxCity', XtxCity)

    // 自定义图片懒加载指令
    // <img v-lazy="item.picture" alt="" / >
    app.directive('lazy', {
      // vue2 : inserted(){}
      // vue3 : mounted() {}
      mounted(el,binding) {
        const {stop} = useIntersectionObserver(el,([{isIntersecting}]) => {
          if(isIntersecting) {
            el.src = binding.value
            stop()
            // 如果图片加载失败，显示默认的图片
            el.onerror = function () {
              el.src =  defaultImg
            }
          }
        },{
          threshold: 0  // threshold 容器和可视区交叉的占比（进入的面积/容器完整面试） 取值，0-1 之间，默认比0大，所以需要滚动较多才能触发进入可视区域事件
      })
      }
    })
  },
}